<!-- 组件必须加template -->
<template>
    <!-- 必须有一个根元素div， 所有的div代码都要放在这里面 -->
     <div class="vue">
        <!-- HTML代码 -->
        <h1>下次你死u算法iu华发新城你看下</h1>
        <!-- 
            {{  }}插值渲染， 里面放的是data中定义的变量 如果没有定义直接使用会报错
            {{  }}可以写变量 也可以写js语法
        -->
        <h2>{{ name }}----{{ age}}</h2>
        {{ age < 20 ? "莫欺少年穷":"漠其老年穷" }}
        <h1>{{ obj.substring(0,4) }}</h1>
        <h2>
            <span>我是span</span>
        </h2>
     </div>
</template>
<!-- js代码 -->
 <script>
//  export default 方便其他文件使用这个软件
    export default{
        name:"vue",
        // 防止变量
        data(){
            return{
                name:"孙悟空",
                age:500,
                obj:"4:40放学"
            }
        },
        // 方法
        methods:{

        },
    }
</script>


<!-- css -->
 <!-- scoped 只在当前组件中生效，减少样式冲突 -->
 <style scoped lang="scss">
 /* 
    css: 层叠样式表
    // 都支持css语法 ，新增一些变量 运算
    sass:和scss同一家
    scss:是sass引入的新的语法 兼容css3，继承sass
    less: 是css预处理器，新增一些变量 运算，less比sass慢，所以一般用scss
 
 */

/*  导入scss  */
    // @ 表示src目录
    @import '@/assets/style.scss';

    //scss变量用$+名字

    $main-color: #ccc;
    $height:200px;
    $s:100px;
    h1{
        background-color: $main-color;
        height: $height - $s;
    }       
</style>